<template>
	<view class="page-container">
		<view class="status_bar"></view>
		<view style="display: flex; align-items: center; height: 88rpx; position: relative;">
			<image src="/static/indicator-back.png" style="width: 48rpx; height: 48rpx; position: absolute; top: 20rpx; left: 32rpx;" @tap="navBack"></image>
			<view style="font-size: 36rpx; font-weight: 600; flex: 1; text-align: center;">邀请朋友</view>
		</view>
		
		
		<view class="box">
			<view style="height: 112rpx; display: flex; align-items: center; padding-left: 32rpx; border-bottom: 1px dashed rgba(220, 220, 220, 1);">
				<view style="font-size: 36rpx;font-weight: 600;">邀请流程</view>
			</view>
			<view style="display: flex; padding: 32rpx; align-items: center; justify-content: space-around">
				<view >
					<view style="display: flex; justify-content: center;">
						<image src="/static/invite/link.png" style="width: 48rpx; height: 48rpx;"></image>
					</view>
					<view style="margin-top: 24rpx; color: rgba(153, 153, 153, 1); text-align: center;">发送链接</view>
				</view>
				
				<image src="/static/invite/step.png" style="width: 15rpx; height: 20rpx;"></image>
				<view >
					<view style="display: flex; justify-content: center;">
						<image src="/static/invite/sigin.png" style="width: 48rpx; height: 48rpx;"></image>
					</view>
					<view style="margin-top: 24rpx; color: rgba(153, 153, 153, 1); text-align: center;">邀请注册</view>
				</view>
				<image src="/static/invite/step.png" style="width: 15rpx; height: 20rpx;"></image>
				<view >
					<view style="display: flex; justify-content: center;">
						<image src="/static/invite/login.png" style="width: 48rpx; height: 48rpx;"></image>
					</view>
					<view style="margin-top: 24rpx; color: rgba(153, 153, 153, 1); text-align: center;">登录用户</view>
				</view>
				<image src="/static/invite/step.png" style="width: 15rpx; height: 20rpx;"></image>
				<view >
					<view style="display: flex; justify-content: center;">
						<image src="/static/invite/gift.png" style="width: 48rpx; height: 48rpx;"></image>
					</view>
					<view style="margin-top: 24rpx; color: rgba(153, 153, 153, 1); text-align: center;">双方奖励</view>
				</view>
			</view>
		</view>
		
		<view class="box" style="padding: 32rpx;">
			<view style="display: flex; align-items: center; justify-content: space-around;">
				<view style="width: 256rpx;">
					<view style="text-align: center;font-size: 32rpx; font-weight: 600;">第一个邀请</view>
					
				</view>
				<image src="/static/invite/arrow.png" style="width: 32rpx; height: 32rpx;"></image>
				<view style="width: 256rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, computed} from 'vue'
	import { http } from '@/utils/request'
	import { appName, appVersion } from '@/config/config';
	import { onMounted } from 'vue';
	import { onLoad,onShow } from "@dcloudio/uni-app";
	const navBack = ()=>{
		uni.navigateBack();
	}
	
	const shareData = reactive({
		firstDiamondCount: 0,
		firstStartCount: 0,
		moreDiamondCount: 0,
		moreStarCount: 0,
		registerDiamondCount: 0,
		url: '',
	})
	
	onLoad((option)=>{
		http.get("/app/user/share").then(resp=>{
			console.log(resp);
			Object.assign(shareData, resp.data);
		})
	})
	
</script>

<style lang="scss" scoped>
	
	.page-container {
		min-height: 500rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(90deg, rgba(194, 253, 255, 1) 0%, rgba(228, 252, 182, 1) 100%);
		
	}
	
	.box {
		margin: 16rpx 32rpx 0 32rpx;
		background-color: white;
		border-radius: 16rpx;
		box-shadow: 5px 5px 10px  rgba(0, 0, 0, 0.1);
	}
	
</style>